import { defineComponent } from "vue";
import { useRouter } from "vue-router";
import demoList from "@/components/demo";
import classes from "./demo.module.scss";

const ComponentItem = (props: {
  content: { title: string; image: string; describe: string };
  jump: (id: string) => void;
}) => {
  const { image, title, describe } = props.content;

  return (
    <div class={classes["com-item"]}>
      <h1 class={classes["com-title"]} onClick={() => props.jump(title)}>
        {title}
      </h1>
      <div class={classes["com-content"]}>
        <img src={image} alt="" />
        <div>{describe}</div>
      </div>
    </div>
  );
};

/** 组件页面，输出组件demo */
export default defineComponent({
  setup() {
    const route = useRouter();

    /** 跳转到详情页 */
    const jumpDetail = (id: string) => {
      route.push({
        path: "/detail",
        query: { id },
      });
    };

    /** 渲染函数 */
    return () => (
      <div class={classes["card"]}>
        {demoList.map((item) => (
          <ComponentItem content={item} jump={jumpDetail} />
        ))}
      </div>
    );
  },
});
